<script>
    $(document).ready(function() {
        /******************************************************************/
        //USUARIOS
        /******************************************************************/
        //MOSTRAR TABLA ACTUAL
        mostrarDatos();
        $("#selectipousuario").on('change', function() {
            var val = $("#selectipousuario").val();
            $("#tipo").val(val);
        });
        $("#selectipousuarioedit").on('change', function() {
            var val = $("#selectipousuarioedit").val();
            $("#edittipinput").val(val);
        });
        //------------------------------------------------------
          $("#selectestado").on('change', function() {
            var val = $("#selectestado").val();
            $("#estado").val(val);
        });
        $("#selectestadoedit").on('change', function() {
            var val = $("#selectestadoedit").val();
            $("#estadoedit").val(val);
        });
        //------------------------------------------------------
        
        //ocultar barras de progreso
        $("#prog").hide();
        $("#progedit").hide();

        //declarar classes como button
        $(".botones").button();
        $(".subir").button();
        $("#userfile").button();
        //OPEN DIV NUEVO USUARIO BUTTON
        //-----------------------------------
        $("#adddiv").click(function() {
            $("#formuser").trigger("reset");
            $("#userfile").val("");
            $("#respuesta").html("");
            $("#divuser").dialog("open");

        });
        //OPEN DIV EDIT USUARIO 
        //-------------------------------------
        //LLENAR EDITAR CON DATOS EXISTENTES
        $(document).on("click", ".editar", function() {
            idusu = $(this).attr('data-id');
            $("formedit").trigger("reset");
            var id = "";
            var username = "";
            var password = "";
            var tipo = "";
            var rut = "";
            var nombre = "";
            var appaterno = "";
            var apmaterno = "";
            var email = "";
            var filename = "";
            $.ajax({
                url: 'http://localhost:26/ecomerce/users/view/' + idusu,
                dataType: 'json',
                type: "POST",
               
                success: function(data) {
                    $.each(data, function(item2) {
                        id = data[item2].id;
                        username = data[item2].username;
                        password = data[item2].password;
                        tipo = data[item2].tipo;
                        rut = data[item2].rut;
                        nombre = data[item2].nombre;
                        appaterno = data[item2].apellidoPaterno;
                        apmaterno = data[item2].apellidoMaterno;
                        email = data[item2].email;
                        filename = data[item2].filename;

                    });

                    $("#edituseinput").val(username);
                    //$("#editpasinput").val(password);
                    $("#edittipinput").val(tipo);
                    $("#editrutinput").val(rut);
                    $("#editnominput").val(nombre);
                    $("#editpatinput").val(appaterno);
                    $("#editmatinput").val(apmaterno);
                    $("#editemainput").val(email);
                    $("#editfileinput").val(filename);
                    $("#idusu").val(id);
                    $("#edituserfile").val("");
                    $("#editaruser").dialog("open");
                },
                error: function() {
                    alert("No Existe este usuario");
                }
            });

        });

        /****************************************************/
        /****************************************************/
        //DECLARACION DIALOG DIV AGREGAR Y EDITAR USERS
        $("#divuser").dialog({
            height: 'auto',
            width: 'auto',
            autoOpen: false,
            modal: true,
            show: {
                effect: "blind",
                duration: 300
            },
            hide: {
                effect: "blind",
                duration: 300
            }
        }).css("font-size", "15px", "width", "auto");
        $('#divuser').submit(function(e) {
            e.preventDefault();
        });
        /****************************************************/
        /****************************************************/
        $("#editaruser").dialog({
            height: 'auto',
            width: 'auto',
            autoOpen: false,
            modal: true,
            show: {
                effect: "blind",
                duration: 300
            },
            hide: {
                effect: "blind",
                duration: 300
            }
        }).css("font-size", "15px", "width", "auto");
        $('#editaruser').submit(function(e) {
            e.preventDefault();
        });
        /****************************************************/
        /****************************************************/
        //SELECCION DE IMAGENES AGREGAR 
        $('#userfile').change(function() {
            var fileName = $('#userfile').val();
            var clean = fileName.split('\\').pop(); // clean from C:\fakepath OR C:\fake_path 
            $("#filenamehidd").val(clean);

        });
        //SELECCION DE IMAGENES EDITAR
        /****************************************************/
        $('#edituserfile').change(function() {
            var fileName = $('#edituserfile').val();
            var clean = fileName.split('\\').pop(); // clean from C:\fakepath OR C:\fake_path 
            $("#editfileinput").val(clean);

        });
        /****************************************************/
        //GUARDAR USER BUTTON ADD DIALOG
        $("#subir").click(function(e) {
            e.preventDefault();
            $.ajax({
                url: "http://localhost:26/ecomerce/users",
                type: "POST",
                data: $("#formuser").serialize(),
                success: function() {
                    if ($("#userfile").val()) {
                        $("#prog").show();
                        //LUEGO DE AGREGAR AL USUARIO SE SUBE LA IMAGEN CORRESPONDIENTE
                        $("#userfile").upload("http://localhost:26/ecomerce/users/subirimagen", function(e) {
                            $("#respuesta").html(e);
                            mostrarDatos();
                            alert("Agregada con exito");
                            $("#divuser").dialog("close");
                            $("#prog").hide();
                        }, $("#prog"));

                    } else {
                        mostrarDatos();
                        alert("Agregada con exito");
                        $("#divuser").dialog("close");
                    }
                },
                error: function() {
                    alert("No fue agregado");
                }
            });

        });
        /****************************************************/
        /****************************************************/
        //EDITAR BUTTON DIALOG
        $("#editarbutton").click(function(e) {
            var idusu = $("#idusu").val();

            e.preventDefault();
            $.ajax({
                url: 'http://localhost:26/ecomerce/users/edit/' + idusu,
                type: "POST",
                data: $("#formedit").serialize(),
                success: function() {


                    if ($("#edituserfile").val()) {
                        $("#progedit").show();
                        //LUEGO DE AGREGAR SE SUBE LA IMAGEN CORRESPONDIENTE
                        $("#edituserfile").upload("http://localhost:26/ecomerce/users/subirimagen", function(e) {
                            $("#respuestaedit").html(e);
                            mostrarDatos();
                            alert("Editado con exito");
                            $("#editaruser").dialog("close");
                            $("#progedit").hide();
                            $("#respuestaedit").html("");

                        }, $("#progedit"));

                    } else {
                        alert("Editado con exito");
                        mostrarDatos();
                        $("#editaruser").dialog("close");
                    }
                }
            });

        });
        /****************************************************/


        /****************************************************/
        //ELIMINAR BUTTON 
        $(document).on("click", ".delete", function(e) {
            e.preventDefault();

            var iduse = $(this).attr('data-id');
            $.ajax({
                url: "http://localhost:26/ecomerce/users/delete/" + iduse,
                type: "POST",
                success: function() {
                    alert("Eliminado con exito");
                    mostrarDatos();
                },
            });
        });
    });
    //FUNCION PARA MOSTRAR DATOS DE LA TABLA
    function mostrarDatos() {
        $.ajax({
            url: 'http://localhost:26/ecomerce/users/listausers',
            dataType: 'json',
            beforeSend: function() {
                $('#tablausers').html("<center><img src='/ecomerce/css/img/ajax_small.gif'/></center>");
            },
            success: function(data) {
                if (data != null) {
                    var tabla = '<table>';
                    tabla += '<tr>';
                    tabla += '<th>Imagen</th><th>Estado</th><th>Rut</th><th>Nombre</th><th>Ap Paterno</th><th>Ap Materno</th><th>email</th><th>Username</th><th>Tipo usuario</th><th>Editar</th>';
                    tabla += '</tr>';
                    $.each(data, function(index, item) {     
                 
                        tabla += '<tr>';
                        tabla += '<td><img src="/ecomerce/img/uploads/user/filename/' + item.user.filename + '" class="imgtabla"></td>';
                       tabla += '<td>' + item.user.estado + '</td>';
                        tabla += '<td>' + item.user.rut + '</td>';
                        tabla += '<td>' + item.user.nombre + '</td>';
                        tabla += '<td>' + item.user.apellidoPaterno + '</td>';
                        tabla += '<td>' + item.user.apellidoMaterno + '</td>';
                        tabla += '<td>' + item.user.email + '</td>';
                        tabla += '<td>' + item.user.username + '</td>';
                        tabla += '<td>' + item.user.tipo + '</td>';
                        tabla += '<td><button type="button" class="editar" data-id="' + item.user.id + '">Editar</button></td>';
                        //tabla += '<td><button type="button" class="delete" data-id="' + item.user.id + '">Eliminar</button></td>';
                        tabla += '</tr>';

                    });
                    tabla += '</table>';
                    $('#tablausers').html(tabla);
                } else {
                    tabla = '<center>No hay usuarios en la base de datos</center>';
                    $('#tablausers').html(tabla);
                }

            }
        });
    }



    /********************************************************************/
//CIERRE USUARIOS
    /********************************************************************/
</script>
<br><br><hr>
<!-- AGREGAR USUARIOS -->
<center><button  id="adddiv" class="botones">Nuevo Usuario</button></center>
<div id="divuser" title="Nuevo Usuario">

    <form id="formuser" method="POST">
       Estado:   <select id="selectestado">
            <option value="">Seleccione un estado</option>
            <option value="habilitado">Habilitado</option>
            <option value="deshabilitado">Deshabilitado</option>
        </select>
        <input id="estado" class="fieldform" type="text" name="estado" value=""><br>   
        usuario: <input id="username" class="fieldform" type="text" name="username"><br>
       <input id="password" class="fieldform" type="text" name="password">
        tipo de usuario:   <select id="selectipousuario">
            <option value="admin">Administrador</option>
            <option value="cliente">Cliente</option>
        </select>
        <input id="tipo" class="fieldform" type="hidden" name="tipo" value="cliente"><br>       
        Rut: <input id="rut" class="fieldform" type="text" name="rut"><br>
        Nombre: <input id="nombre" class="fieldform" type="text" name="nombre"><br>
        Ap. Paterno: <input id="apellidopaterno" class="fieldform" type="text" name="apellidoPaterno"><br>
        Ap. Materno: <input id="apellidomaterno" class="fieldform" type="text" name="apellidoMaterno"><br>
        email: <input id="email" class="fieldform" type="text" name="email"><br>
        <input id="filenamehidd"  type="hidden" name="filename">
        <input id="dir" type="hidden" name="dir" value="img\uploads\user\filename">
    </form>
    <input type="file" id="userfile" name="userfile" />
    <p><progress id="prog" value="0" min="0" max="100"></progress></p>

    <div id="respuesta"></div>
    <br><br><hr>

    <button class="subir"  id="subir">Guardar</button>


</div>
<div id="tablausers"></div>


<!--EDITAR USUARIOS -->
<div id="editaruser" title="Editar Usuario">

    <form id="formedit" method="POST">
        <input id="idusu" type="hidden">
        Estado:   <select id="selectestadoedit">
            <option value="">Seleccione un estado</option>
            <option value="habilitado">Habilitado</option>
            <option value="deshabilitado">Deshabilitado</option>
        </select>
        <input id="estadoedit" class="fieldform" type="hidden" name="estado" value=""><br>  
        usuario: <input id="edituseinput" class="fieldform" type="text" name="username"><br>
        <input id="editpasinputsman" class="fieldform" type="hidden" name="passwords">
          <select id="selectipousuarioedit">
              
            <option value="cliente">Seleccione un tipo de usuario</option>
            <option value="admin">Administrador</option>
            <option value="cliente">Cliente</option>
        </select>
        <input id="edittipinput" class="fieldform" type="hidden" name="tipo" value="cliente">


       <input id="editrutinput" class="fieldform" type="hidden" name="ruts">
         <input id="editnominput" class="fieldform" type="hidden" name="nombre">
        <input id="editpatinput" class="fieldform" type="hidden" name="apellidoPaterno">
         <input id="editmatinput" class="fieldform" type="hidden" name="apellidoMaterno">
       <input id="editemainput" class="fieldform" type="hidden" name="email">
        <input id="editfileinput"  type="hidden" name="filename">
        <input id="dir" type="hidden" name="dir" value="img\uploads\user\filename">

    </form>
    <input type="file" id="edituserfile" name="userfile" />
    <p><progress id="progedit" value="0" min="0" max="100"></progress></p>
    <div id="respuestaedit"></div>
    <br><br><hr>

    <button class="subir" type="button"  id="editarbutton">Guardar</button>


</div>